<template>
  <div id="demo">
    <h2 class="title" ref="titleRef">Demo</h2>
    <div class="demo-container">
      <div class="demo-item" v-for="item in demoList" :key="item._id">
        <a :href="item.url" target="_blank">
          <div class="profile-img">
            <img :src="item.coverImg" alt="" />
          </div>
          <h4 class="name">{{ item.title }}</h4>
          <ul>
            <li v-for="tag in item.tags" :key="tag._id">
              <svg class="icon" aria-hidden="true">
                <use :xlink:href="tag.icon"></use>
              </svg>
              <span>{{ tag.name }}</span>
            </li>
          </ul></a
        >
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, onBeforeMount, toRefs } from "vue";
import http from "../../services/http";
export default {
  name: "Demo",
  setup() {
    const state = reactive({
      demoList: [],
      queryInfo: {
        pageNum: 1,
        pageSize: 5,
      },
      totalDemos: 0,
    });
    //请求文章列表数据
    const getdemoList = async () => {
      const res = await http.get("demo", {
        params: state.queryInfo,
      });
      state.demoList = res.data.demoList;
      state.totalDemos = res.data.totalDemos;
    };
    onBeforeMount(() => {
      getdemoList();
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style>
</style>